<?php
if (isset($_POST['one']))
{
    $v = '<h3 class="success">Response</h3>';
    $v .= '<p>';
    $v .= isset($_POST['one']) ? 'Form element one: ' . htmlentities($_POST['one'], ENT_QUOTES) . '<br />' : NULL;
    $v .= isset($_POST['three']) ? 'Form element three: ' . htmlentities($_POST['three'], ENT_QUOTES) . '<br />' : NULL;
    $v .= isset($_POST['four']) ? 'Form element four: ' . htmlentities($_POST['four'], ENT_QUOTES) . '<br />' : NULL;
    $v .= isset($_POST['five']) ? 'Form element five: ' . htmlentities($_POST['five'], ENT_QUOTES) . '<br />' : NULL;
    $v .= isset($_POST['six']) ? 'Form element six: ' . htmlentities($_POST['six'], ENT_QUOTES) . '<br />' : NULL;
    $v .= isset($_POST['seven']) && is_array($_POST['seven']) ? 'Form element seven: ' . htmlentities(implode(', ', $_POST['seven']), ENT_QUOTES) . '<br />' : NULL;
    $v .= '</p>';
    
    if (isset($_FILES['two']) && strstr(mime_content_type($_FILES['two']['tmp_name']), 'image/'))
    {
        $s = getimagesize($_FILES['two']['tmp_name']);
        $f = substr(md5(time()), 0, 16) . substr($_FILES['two']['name'], (strrpos($_FILES['two']['name'], '.')));
        
        move_uploaded_file($_FILES['two']['tmp_name'], $_SERVER['DOCUMENT_ROOT'] . '/files/javascript/jquery/iframe-post-form/images/' . $f);
        
        $v.= '<img src="/files/javascript/jquery/iframe-post-form/images/' . $f . '" ' . $s[3] . ' alt="Your uploaded image" />';
    }
    
    die($v);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ajax,file upload,ajax file uploader,iframe upload,form,form upload,file upload,jquery ajax,jquery file upload,jquery ajax file upload,jquery plugin" />
<meta name="description" content="jQuery ajax file upload plugin - submit your file upload form with ajax" />
<title>Really simple jQuery Ajax File Uploader plugin - JainaEwen.com</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="iframe-post-form.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.iframe-post-form.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript"><!--
$(function ()
{
    $('form').iframePostForm
    ({
         post : function ()
        {
            var msg = !$('input[type=file]').val().length ? 'Submitting form...' : 'Uploading file...';
            jaeFunctions.setMessage('<div class="message">' + msg + '</div>', 'message', false, true);
        },
        complete : function (response)
        {
            jaeFunctions.setMessage(response, 'success', false, true);
        }
    });
});
//--></script>
</head>

<body>
<h1>Really simple jQuery Ajax File Uploader plugin.</h1>
<p>Well, it's not really Ajax uploading considering file upload with ajax is not possible, but the end result is similar.</p>
<p>This jQuery plugin creates a hidden iframe and sets the form's target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server's response from the iframe.</p>
<p>This pseudo ajax file upload plugin is about 550 bytes minified and gzipped.</p>
<h2>Iframe Post Form <abbr title="Application Programming Interface">API</abbr>;</h2>
<dl>
    <dt><code>iframeID : 'iframe-post-form'</code></dt>
    <dd>The iframe's ID &amp; name.</dd>
    
    <dt><code>post : function ()</code></dt>
    <dd>When the form has been submitted.</dd>
    
    <dt><code>complete : function (response)</code></dt>
    <dd>After everything has been submitted and completed.</dd>
</dl>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" enctype="multipart/form-data">
    <fieldset id="demo">
        <legend>File upload form demo</legend>
        <p>This file upload demo will only allow images.</p>
        
        <dl>
            <dt><label for="one">Input type = text (name = one)</label></dt>
            <dd><input type="text" name="one" id="one" value="abc" /></dd>
            
            <dt><label for="two">Input type = file (name = two)</label></dt>
            <dd><input type="file" name="two" id="two" /></dd>
            
            <dt><label for="three">Input type = checkbox (name = three)</label></dt>
            <dd>
                <dl>
                    <dt><label for="three">ghi</label></dt>
                    <dd><input type="checkbox" name="three" id="three" value="ghi" checked="checked" /></dd>
                </dl>
            </dd>
            
            <dt><label for="four-a">Input type = radio (name = four)</label></dt>
            <dd>
                <dl>
                    <dt><label for="four-a">mno</label></dt>
                    <dd><input type="radio" name="four" id="four-a" value="mno" checked="checked" /></dd>
                    
                    <dt><label for="four-b">pqr</label></dt>
                    <dd><input type="radio" name="four" id="four-b" value="pqr" /></dd>
                </dl>
            </dd>
            
            <dt><label for="five">Textarea (name = five)</label></dt>
            <dd><textarea name="five" id="five" rows="4" cols="14">yz0</textarea></dd>
            
            <dt><label for="six">Select (name = six)</label></dt>
            <dd>
                <select name="six" id="six">
                    <option value="456" selected="selected">456</option>
                    <option value="789">789</option>
                    <option value="987">987</option>
                </select>
            </dd>
            
            <dt><label for="seven">Select (name = seven) (multiple = multiple)</label></dt>
            <dd>
                <select name="seven[]" id="seven" multiple="multiple">
                    <option value="654" selected="selected">654</option>
                    <option value="321">321</option>
                    <option value="0zy">0zy</option>
                </select>
            </dd>
        </dl>
        
        <ul>
            <li><input type="submit" value="Submit" /></li>
        </ul>
    </fieldset>
</form>

</body>
</html>